<template>
<div class="articles-container">
  <a-list
      class="demo-loadmore-list"
      :loading="initLoading"
      item-layout="horizontal"
      :data-source="list"
  >
    <template #loadMore>
      <div

          :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }"
      >
        <a-affix :offset-bottom="20">
          <a-button type="dashed" size="large" :loading="loading" @click="onLoadMore">{{ loading ? '正在加载中' : '加载更多' }}</a-button>
        </a-affix>
      </div>
    </template>
    <template #renderItem="{ item }">
      <a-list-item>
        <template #actions>
          <a-button primary type="text">
            <a key="list-loadmore-edit">编辑</a>
          </a-button>
          <a-button danger type="text" @click="deleteArticleHandler(item.articleId)">
            <a key="list-loadmore-more" class="">删除</a>
          </a-button>
        </template>
        <a-skeleton avatar :title="true" :loading="!!item.loading" active>
          <a-list-item-meta
              :description="item.articleDesc"
          >
            <template #title>
              <a href="https://www.antdv.com/">{{ item.articleTitle }}</a>
            </template>
            <template #avatar>
              <a-image fallback="https://img.tukuppt.com/png_preview/00/11/97/rQi2c6t2UP.jpg!/fw/780" :src="item.articleCover" />
            </template>
          </a-list-item-meta>
          <div>
            <a-tag v-for="(tagItem) in item.tags" :color="randomColor()" :key="tagItem.tagId">{{ tagItem.tagName }}</a-tag>
          </div>
        </a-skeleton>
      </a-list-item>
    </template>
  </a-list>
</div>
</template>

<script lang="ts" setup>
import {onMounted, ref, nextTick, reactive,} from 'vue';
import {getArticleList,deleteArticle} from '@/api/article'
import {message} from "ant-design-vue";
import {randomColor} from "@/utils/utils";
import { Modal } from 'ant-design-vue';

const count = 3; // 骨架屏站位数量

const initLoading = ref(true);
const loading = ref(false);
const data = ref([]);
const list = ref([]);

const onLoadMore = async () => {
  try {
    loading.value = true;
    requestArticleConfig.page++
    // 添加对应数量的占位骨架
    // @ts-ignore
    list.value = data.value.concat([...new Array(count)].map(() => ({loading:true,})))
    let res:any = await await getArticleList(requestArticleConfig.page,requestArticleConfig.pageSize,requestArticleConfig.cateId)
    if(res.code !== 200) {
      requestArticleConfig.page-- // 恢复到原来的
      return
    }
    if(res.code == 200 && res.articles.length == 0) {
      requestArticleConfig.page--
      message.warn('已经是最后一页了')
    }
    if(res.articles.length!==0){
      res.articles.map((item:any) => {
    item.articleCover = item.articleCover
  })
    }
    const newData = data.value.concat(res.articles);
    loading.value = false;
    data.value = newData;
    list.value = newData;
    nextTick(() => {
      window.dispatchEvent(new Event('resize'));
    });
  }catch (e:any) {
    loading.value = false;
    message.error(e.message)
  }
};

// 获取文章列表数据
interface requestArticleInterface {
  page:number,
  pageSize:number,
  cateId?:number,
}
let requestArticleConfig = reactive<requestArticleInterface>({
  page:1,
  pageSize:15,
  cateId:0
})

let requestArticles =  async () => {
  let res:any = await getArticleList(requestArticleConfig.page,requestArticleConfig.pageSize,requestArticleConfig.cateId)
  initLoading.value = false
  res.articles.map((item:any) => {
    item.articleCover = item.articleCover
  })
  data.value = res.articles
  list.value = res.articles
}

// 删除文章详情
let deleteArticleHandler = async (id:number) => {
  Modal.confirm({
    title: '删除文章',
    content: '确定要删除该文章吗？',
    okText: '确认',
    cancelText: '取消',
    onOk: async () => {
      try {
        let res:any = await deleteArticle(id)
        if(res.code === 200){
          message.success('删除成功')
          requestArticles()
        }
      }catch (e:any) {
        message.error(e.message)
      }
    }
  })
}


onMounted(() => {
  requestArticles()
})
</script>

<style lang="scss" scoped>
.demo-loadmore-list {
  min-height: 350px;
  padding-bottom: 20px;
}
::v-deep .ant-image {
  width: 120px;
  height: 65px;
  max-height: 65px;
  height: min-content;
  object-fit: cover;
  overflow: hidden;
}
</style>
